<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <title>区域意向客户详情页</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_855021_i2jfy4r0uq.css">
</head>
<style>
    [v-cloak] {
        display: none;
    }

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 12px;
    }

    body {
        margin: 1px;
        background: #f8f8f8;
    }

    .boxBoy {
        background: #fff;
    }

    table {
        border-spacing: 0;
        border-collapse: collapse;
        display: table;
    }

    th {
        font-weight: normal;
    }

    table.text-center, table.text-center td, table.text-center th {
        text-align: center;
        font-size: 12px;
    }

    .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
        border: 1px solid #cbcbcd;
        height: 28px;
        position: relative;
        color: #2a8cec;
        padding: 0 4px;
    }

    table th {
        background: #f8f8f8;
    }

    .table-bordered {
        border: 1px solid #cbcbcd;
    }

    .table {
        width: 100%;
        max-width: 100%;
    }

    .hidden {
        display: none;
    }

    .lineOne, .lineTwo {
        text-align: left;
    }

    .tdColor {
        background-color: #f8f8f8;
        font-weight: normal;
        color: #333 !important;
    }

    .lineOne span {
        max-height: 24px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        text-align: left;
    }

    .lineTwo span {
        max-height: 55px;
        line-height: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        text-align: left;
        padding: 5px;

    }

    .div-td-content-more {
        position: absolute;
        height: auto;
        z-index: 999;
        line-height: 20px;
        background-color: #d3e8fd;
        padding: 8px 6px;
        border: 1px solid #e8e8ea;
        display: none;
    }

    .div-td-content-more i {
        width: 15px;
        height: 12px;
        background: url("/dist/img/more-icon.png");
        position: absolute;
        left: 50px;
        top: -12px;
    }

    .clear {
        clear: both
    }

    .boxItem {
        width: 100%;
        margin-top: -1px;
        padding-bottom: 0;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        border: none;
        position: relative;
    }

    .boxItemTitle {
        color: #2c8cec;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 6px;
        text-align: center;
    }

    .home {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
        height: 14px;
        line-height: 14px;
        text-align: center;
    }

    .dian-icon {
        background: url("/dist/img/dian.png") no-repeat;
        background-size: cover;
        width: 14px;
        height: 14px;
        display: inline-block;
    }

    .jiaobiao, .jiaobiaoNew {
        position: relative;
    }

    .jiaobiao i {
        display: block;
        width: 0;
        height: 0;
        border-width: 0px 0 12px 12px;
        border-style: solid;
        border-color: transparent transparent transparent #2a8cec;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .jiaobiaoNew i {
        display: block;
        width: 12px;
        height: 12px;
        background: url("/dist/img/newLog2.png");
        background-size: 100% 100%;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .lineImg {
        padding-top: 5px !important;
        padding-bottom: 10px !important;
    }

    .lineImg img {
        height: 45px;
        width: 45px;
        float: left;
        margin: 10px;
        object-fit: cover;
    }

    .newCustomer {
        background: url(/dist/img/new.png) no-repeat;
        background-size: cover;
        width: 20px;
        height: 20px;
        right: 0;
        top: 2px;
        position: absolute;
    }

    .wajueji {
        padding-left: 140px;
        background: url("/dist/img/wajueji.png") no-repeat;
        background-size: 120px 88px;
        height: 88px;
        line-height: 88px;
        color: red;
        font-size: 14px;
        font-weight: bold;
        margin-left: 50px;
    }

    .qipao {
        /*background: url(/dist/img/qipao.png);*/
        background-size: 100% 100%;
        height: 88px;
        /* padding: 0 20px; */
        padding-left: 20px;
        /*padding-right: 20px;*/
        color: red;
        line-height: 88px;
        float: left;
        font-size: 14px;
        font-weight: bold;
    }

    .plan1 {
        background: url("/dist/img/plan1.png") no-repeat center center;
        background-size: 100%;
    }

    .plan2 {
        background: url("/dist/img/plan2.png") no-repeat center center;
        background-size: 100%;
    }

    .plan3 {
        background: url("/dist/img/plan3.png") no-repeat center center;
        background-size: 100%;
    }

    .boxItemTitleNotice {
        color: red;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
    }

    .boxItemTitleNotice i {
        background: url("/dist/img/jg.png") no-repeat center center;
        height: 22px;
        width: 22px;
        background-size: cover;
        display: inline-block;
        margin-bottom: -3px;
        margin-left: 5px;
    }

    .boxItemTitleNoticeTime {
        color: red;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        text-align: center;
    }

    .boxItemTitleNoticeTime i {
        background: url("/dist/img/jg.png") no-repeat center center;
        height: 16px;
        width: 16px;
        background-size: cover;
        display: inline-block;
        margin-bottom: -3px;
        margin-left: 5px;
    }

    .search-button {
        width: 14px;
        height: 14px;
        background-image: url(/dist/img/glass.jpg);
        border: 0 none;
        cursor: pointer;
        margin-top: 0px;
    }

    input[type=button] {
        outline: none;
    }

    .oaBtn {
        background: url(/dist/img/btn-bj2.png) repeat-y !important;
        background-size: 100% 100% !important;
        color: #fff !important;
    }

    .btn-group-sm > .btn, .btn-sm {
        padding: 2px 10px;
    }

    .btn {
        border-radius: 3px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent;
    }

    .pull-right {
        float: right !important;
    }

    .blue {
        color: #39c;
    }

    .red {
        color: #e03800;
    }

    .weather img {
        height: 30px;
        width: 30px;
        float: left;
    }

    .btn-blue {
        border: none;
        background: #2a8cec;
        color: #fff;
        font-size: 16px;
        height: 48px;
        width: 100%;
        border-radius: 2px;
        outline: none;
        /*position: fixed;*/
        left: 0;
        bottom: 0;
    }

    .btn-blue:active {
        border: none;
        background: #356698;
        opacity: 0.8;
        color: #fff;
        font-size: 16px;
        height: 48px;
        width: 100%;
        border-radius: 2px;
        outline: none;
        /*position: fixed;*/
        left: 0;
        bottom: 0;
        font-weight: bold;
    }

    .btn-blue.focus, .btn-blue:focus, .btn-blue:hover {
        color: #fff;
        text-decoration: none;

    }

    .line {
        border-bottom: 4px solid #2a8cec;
    }

    .tdInput {
        color: #2a8cec;
        border: none;
        outline: none;
    }

    .icon-zhankai, .icon-shouqi {
        cursor: pointer;
        border-radius: 5px;
        float: right;
        font-weight: bold;
    }
    .biTian {
        position: absolute;
        color: red;
        margin-left: -10px;
        margin-top: 4px;
    }
    model-picker-input {
        opacity: 0 !important;
        top: -9999px;
        left: -9999px;
        position: absolute;
    }

    .model-picker-span {
        position: relative;
        display: block;
        outline: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        border-bottom: 1px solid #ccc;
        background-color: #fff;
        color: #ccc;
        cursor: pointer;
    }

    .model-picker-span > .placeholder {
        color: #aaa;
    }

    .model-picker-span > .arrow {
        position: absolute;
        top: 50%;
        right: 8px;
        width: 10px;
        margin-top: -3px;
        height: 5px;
        background: url(../images/drop-arrow.png) -10px -25px no-repeat;
    }

    .model-picker-span.focus,
    .model-picker-span.open {
        border-bottom-color: #46A4FF;
    }

    .model-picker-span.open > .arrow {
        background-position: -10px -10px;
    }

    .model-picker-span > .title > span {
        color: #333;
        padding: 5px;
        border-radius: 3px;
    }

    .model-picker-span > .title > span:hover {
        background-color: #f1f8ff;
    }

    .model-picker-dropdown {
        position: absolute;
        width: 315px;
        left: -9999px;
        top: -9999px;
        outline: 0;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        z-index: 999999;
        display: none;
        min-width: 200px;
        margin-bottom: 20px;
        margin-top: 5px;
    }

    .model-select-wrap {
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    }

    .model-select-tab {
        border-bottom: 1px solid #ccc;
        background: #f5f5f5;
        font-size: 13px;
    }

    .model-select-tab > a {
        display: inline-block;
        padding: 4px 20px;
        border-left: 1px solid #ccc;
        border-bottom: 1px solid transparent;
        color: #4D4D4D;
        text-align: center;
        outline: 0;
        text-decoration: none;
        cursor: pointer;
        font-size: 14px;
        margin-bottom: -1px;
    }

    .model-select-tab > a.active {
        background: #fff;
        border-bottom: 1px solid #fff;
        color: #46A4FF;
    }

    .model-select-tab > a:first-child {
        border-left: none;
    }

    .model-select-tab > a:last-child.active {
        border-right: 1px solid #ccc;
    }

    .model-select-content {
        width: 100%;
        min-height: 50px;
        background-color: #fff;
        padding: 5px 5px;
    }

    .model-select {
        font-size: 16px;
    }

    .model-select dl {
        line-height: 2;
        clear: both;
        padding: 3px 0;
        margin: 0;
        max-height: 200px;
        overflow-y: scroll;
    }

    .model-select dt {
        position: absolute;
        width: 2.5em;
        font-weight: 500;
        text-align: right;
        line-height: 2;
    }

    .model-select dd {
        margin-left: 0;
        line-height: 2;
    }

    .model-select.province dd {
        margin-left: 3em;
    }

    .model-select a {
        display: inline-block;
        padding: 0 10px;
        outline: 0;
        text-decoration: none;
        white-space: nowrap;
        margin-right: 2px;
        text-decoration: none;
        color: #333;
        cursor: pointer;
    }

    .model-select a:hover,
    .model-select a:focus {
        background-color: #f1f8ff;
        border-radius: 2px;
        color: #46A4FF;
    }

    .model-select a.active {
        background-color: #46A4FF;
        color: #fff;
        border-radius: 2px;
    }
    .dropdown-menu{
        display: none;
    }
</style>
<body>
<section class="content" id="app" v-cloak>
    <div class="div-td-content-more"><i></i></div>
    <div class="model-picker-dropdown">
        <div class="model-select-wrap">
            <div class="model-select-tab">
                <a class="active" data-count="province">省</a>
                <a class=""data-count="city">市</a>
                <a data-count="county" class="">县</a>
            </div>
            <div class="model-select-content">
                <div class="model-select province" data-count="province" style="display: block;">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="item in provinceList">{{item.name}}</a>
                    </dl>
                </div>
                <div class="model-select city" data-count="province">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="(item,i) in cityList">{{item.name}}</a>
                    </dl>
                </div>
                <div class="model-select county" data-count="county">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="(item,i) in countyList">{{item.name}}</a>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <div class="templateStyle">
        <div class="boxItem">
            <div class="boxBoy">
                <table class="table table-bordered text-center table-width">
                    <tbody>
                    <tr>
                        <td colspan="4" style="background: yellow;color: black">基本信息</td>
                    </tr>
                    <tr>
                        <td class="tdColor" style="width: 25%;"><i class="biTian">*</i>姓名</td>
                        <td style="width: 25%;text-align:left !important;" class="lineOne">
                            <input v-if="pageType=='edit'" type="text" v-model="customerInfo.name"
                                   style="width: 100%;padding-left: 4px;" class="tdInput">
                            <span v-else style="width: 100%;">{{customerInfo.name}}</span>
                        </td>
                        <td class="tdColor" style="width: 25%;"><i class="biTian">*</i>电话</td>
                        <td style="width: 25%;text-align:left !important;">
                            <input class="tdInput" v-if="pageType=='edit'" type="text"
                                   v-model="customerInfo.tel" style="width: 100%">
                            <span v-else style="width: 100%"> {{trims(customerInfo.tel)}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdColor">类型</td>
                        <td style="text-align:left !important;">
                            <select id="customerType" v-if="pageType=='edit'"
                                    v-model="customerInfo.customerType"
                                    style=" background-color: white;width:100%;color: #2a8cec;border-style:none;outline: none;">
                                <option selected="selected">客户(个人)</option>
                                <option>客户(企业)</option>
                                <option>中介(个人)</option>
                                <option>中介(企业)</option>
                            </select>
                            <span v-else>{{customerInfo.customerType}}</span>
                        </td>
                        <td class="tdColor">信用</td>
                        <td style="text-align:left !important;">
                            <select id="customerCredit" v-if="pageType=='edit'"
                                    v-model="customerInfo.customerCredit"
                                    style=" background-color: white;width:100%;color: #2a8cec;border-style:none;outline: none;">
                                <option selected="selected">未知</option>
                                <option>合格</option>
                                <option>不合格</option>
                            </select>
                            <span v-else style="width: 100%"> {{customerInfo.customerCredit}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdColor">生日</td>
                        <td style="text-align:left !important;">
                            <input class="tdInput" v-if="pageType=='edit'" type="text"
                                   placeholder=例:1993-05-18 v-model="customerInfo.birthday"
                                   style="width: 100%;padding-left: 4px;">
                            <span v-else style="width: 100%"> {{customerInfo.birthday}}</span>
                        </td>
                        <td class="tdColor">微信</td>
                        <td style="text-align:left !important;">
                            <input class="tdInput" v-if="pageType=='edit'" type="text"
                                   v-model="customerInfo.wechat" style="width: 100%">
                            <span v-else style="width: 100%"> {{trims(customerInfo.wechat)}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdColor">来源</td>
                        <td colspan="3" style="text-align: left !important;">
                            <select id="source" v-if="pageType=='edit'"
                                    v-model="customerInfo.source"
                                    style=" background-color: white;width:100%;color: #2a8cec;border-style:none;outline: none;">
                                <option selected="selected">销售录入</option>
                                <option>易企秀</option>
                                <option>400</option>
                                <option>其他</option>
                            </select>
                            <span v-else> {{customerInfo.source}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdColor"><i class="biTian">*</i>所在地</td>
                  <!--      <td v-if="pageType=='edit'" colspan="3" style="text-align: left;"
                            @click="selectAddress()">
                            <span type="text" style="width: 100%;padding-left: 4px;"
                                  v-if="customerInfo.provinceName!=''">{{customerInfo.provinceName}}-{{customerInfo.cityName}}-{{customerInfo.countyName}}</span>
                            <span v-else style="padding-left: 4px;">请选择</span>
                        </td>
                        <td v-else colspan="3" style="text-align: left;">
                            {{customerInfo.provinceName}}-{{customerInfo.cityName}}-{{customerInfo.countyName}}
                        </td>-->
                        <td class="td-value" colspan="3" style="text-align: left">
                            <input type="text" class="selectModel" v-if="pageType=='edit'" :value="showDz()" style="width: 100%;border:none;" >
                            <span v-else v-html="showDz()"></span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="templateStyle">
        <div class="boxItem">
            <div class="boxBoy">
                <table class="table table-bordered text-center table-width">
                    <tbody>
                    <tr>
                        <td colspan="4" style="background: yellow;color: black;margin-top: 5px">意向设备</td>
                    </tr>
                    <tr>
                        <td class="tdColor" style="width: 25%;"><i class="biTian">*</i>品牌</td>
                        <td style="text-align:left !important;" colspan="3">
                            <input class="tdInput" v-if="pageType=='edit'" type="text"
                                   v-model="customerInfo.intentionBrand" style="width: 100%;padding-left: 4px;">
                            <span v-else style="width: 100%"> {{customerInfo.intentionBrand}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdColor" style="width: 25%;"><i class="biTian">*</i>意向机型</td>
                        <td style="width: 25%;text-align:left !important;" colspan="3">
                            <input class="tdInput" v-if="pageType=='edit'" type="text"
                                   v-model="customerInfo.intentionModel"
                                   style="width: 100%;padding-left: 4px;">
                            <span v-else style="width: 100%"> {{customerInfo.intentionModel}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="tdColor" style="width: 25%;">购买方式</td>
                        <td class="td-value" style="width: 25%;text-align:left !important;">
                            <select id="buyType" v-if="pageType=='edit'"
                                    v-model="customerInfo.buyType"
                                    style="background-color: white;color: #2a8cec;border-style:none;width:100%;outline: none;">
                                <option selected="selected">全款</option>
                                <option>内部分期</option>
                                <option>融资租赁</option>
                            </select>
                            <span v-else>{{customerInfo.buyType}}</span>
                        </td>
                        <td class="tdColor" style="width: 25%;"><i class="biTian">*</i>购买时间</td>
                        <td style="width: 25%;text-align:left !important;">
                            <select id="buyDate" v-if="pageType=='edit'"
                                    v-model="customerInfo.buyDate"
                                    style=" background-color: white;width:100%;color: #2a8cec;border-style:none;outline: none;">
                                <option selected="selected">七天内</option>
                                <option>一月内</option>
                                <option>三月内</option>
                                <option>半年内</option>
                                <option>已成交</option>
                                <option>丢单</option>
                            </select>
                            <span v-else>{{customerInfo.buyDate}}</span>
                    </tr>
                    <tr>
                        <td class="tdColor">设备用途</td>
                        <td clsss="td-value" colspan="3" v-if="pageType=='edit'"
                            style="text-align: left;background-color: white">
                             <span v-if="currentFlag" style="display: flex;align-items: center;">
                                  <input class="tdInput" id="self"
                                         type="radio"
                                         value="1" v-model="customerInfo.deviceUse">
                                  <label for="self" style="width: 25%;">自用</label>
                                  <input class="tdInput" id="unself"
                                         type="radio"
                                         value="0" v-model="customerInfo.deviceUse">
                                  <label for="unself">非自用</label>
                              </span>
                            <span v-else class="pull-left" style="margin-left: 18.5%">{{flag.value=='1'?'是':'否'}}</span>
                            <!--<select id="deviceUse" v-if="pageType=='edit'"
                                    v-model="customerInfo.deviceUse"
                                    style=" background-color: white;width:100%;color: #2a8cec;border-style:none;outline: none;">
                                <option value=""></option>
                                <option value="1">自用</option>
                                <option value="0">非自用</option>
                            </select>
                            <span v-else>{{customerInfo.deviceUse}}</span>-->
                        </td>
                        <td v-else clsss="td-value" colspan="3" style="text-align: left">
                            {{customerInfo.deviceUse==0 ? '非自用':'自用'}}
                        </td>
                    </tr>
                    <tr>
                        <template v-if="pageType=='edit'">
                            <td class="tdColor"
                                v-if="customerInfo.buyDate=='七天内'||customerInfo.buyDate=='一月内'">
                                <i class="biTian">*</i>现有设备
                            </td>
                            <td class="tdColor" v-else>现有设备</td>
                        </template>
                        <template v-else><td class="tdColor">现有设备</td></template>
                        <td colspan="3" class="lineTwo">
                            <textarea class="tdInput" v-if="pageType=='edit'" type="text"
                                      v-model="customerInfo.existingDevice"
                                      placeholder="请填写客户现有设备及使用情况"
                                      style="width: 100%;height: 55px;resize: none;padding-left: 4px;">
                            </textarea>
                            <span v-else style="width: 100%;padding: 0px;height: 55px;"> {{customerInfo.existingDevice}}</span>
                        </td>
                    </tr>
                    <tr>
                        <template v-if="pageType=='edit'">
                            <td class="tdColor"
                                v-if="customerInfo.buyDate=='七天内'||customerInfo.buyDate=='一月内'">
                                <i class="biTian">*</i>从业经验
                            </td>
                            <td class="tdColor" v-else>从业经验</td>
                        </template>
                        <template v-else><td class="tdColor">从业经验</td></template>
                        <td colspan="3" class="lineTwo">
                            <textarea class="tdInput" v-if="pageType=='edit'" type="text"
                                      v-model="customerInfo.workingExperience"
                                      placeholder="请填写客户以前和现在从事过的行业及相关经验"
                                      style="width: 100%;height: 55px;resize: none;padding-left: 4px;">
                            </textarea>
                            <span v-else
                                  style="width: 100%;padding: 0px;height: 55px;"> {{customerInfo.workingExperience}}</span>
                        </td>
                    </tr>
                    <tr>
                        <template v-if="pageType=='edit'">
                            <td class="tdColor"
                                v-if="customerInfo.buyDate=='七天内'||customerInfo.buyDate=='一月内'">
                                <i class="biTian">*</i>工程情况
                            </td>
                            <td class="tdColor" v-else>工程情况</td>
                        </template>
                        <template v-else><td class="tdColor">工程情况</td></template>
                        <td colspan="3" class="lineTwo">
                            <textarea class="tdInput" v-if="pageType=='edit'" type="text"
                                      v-model="customerInfo.buildCondition"
                                      style="width: 100%;height: 55px;resize: none;padding-left: 4px;">
                            </textarea>
                            <span v-else style="width: 100%;padding: 0px;height: 55px;"> {{customerInfo.buildCondition}}</span>
                        </td>
                    </tr>
                    <tr>
                        <template v-if="pageType=='edit'">
                            <td class="tdColor"
                                v-if="customerInfo.buyDate=='七天内'||customerInfo.buyDate=='一月内'">
                                <i class="biTian">*</i>收入预测
                            </td>
                            <td class="tdColor" v-else>收入预测</td>
                        </template>
                        <template v-else><td class="tdColor">收入预测</td></template>
                        <td colspan="3" class="lineTwo">
                            <textarea class="tdInput" v-if="pageType=='edit'" type="text"
                                      v-model="customerInfo.revenueForecast"
                                      style="width: 100%;height: 55px;resize: none;padding-left: 4px;">
                            </textarea>
                            <span v-else
                                  style="width: 100%;padding: 0px;height: 55px;"> {{customerInfo.revenueForecast}}</span>
                        </td>
                    </tr>
                    <tr>
                        <template v-if="pageType=='edit'">
                            <td class="tdColor"
                                v-if="customerInfo.buyDate=='七天内'||customerInfo.buyDate=='一月内'">
                                <i class="biTian">*</i>竞争对手
                            </td>
                            <td class="tdColor" v-else>竞争对手</td>
                        </template>
                        <template v-else><td class="tdColor">竞争对手</td></template>
                        <td colspan="3" class="lineTwo">
                            <textarea class="tdInput" v-if="pageType=='edit'"
                                      placeholder="请填写竞争对手的商务条件" type="text"
                                      v-model="customerInfo.competitorCondition"
                                      style="width: 100%;height: 55px;resize: none;padding-left: 4px;">
                            </textarea>
                            <span v-else
                                  style="width: 100%;padding: 0px;height: 55px;"> {{customerInfo.competitorCondition}}</span>
                        </td>
                    </tr>
                    <tr v-if="isAdd!=1">
                        <td class="tdColor"><i class="biTian">*</i>最新拜访<br>内容</td>
                        <td colspan="3" class="lineTwo">
                            <textarea class="tdInput" v-if="pageType=='edit'" type="text"
                                      v-model="customerVisitToday.otherCondition"
                                      style="width: 100%;height: 55px;resize: none;padding-left: 4px;">
                            </textarea>
                            <span v-else
                                  style="width: 100%;padding: 0px;height: 55px;"> {{customerVisitToday.otherCondition}}</span>
                        </td>
                    </tr>
                    <!-- <tr>
                         <td class="tdColor">跟踪结果</td>
                         <td clsss="td-value" colspan="3"
                             style="text-align: left;background-color: white">
                             <select id="throwFlag" v-if="pageType=='edit'"
                                     v-model="customerInfo.throwFlag"
                                     style=" background-color: white;width:100%;color: #2a8cec;border-style:none;outline: none;">
                                 <option value="0">不成交</option>
                                 <option value="1">丢单</option>
                                 <option value="2">成交</option>
                             </select>
                             <span v-else>{{customerInfo.throwFlag}}</span>
                         </td>
                     </tr>-->
                    </tbody>
                </table>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="templateStyle" v-if="customerVisitList && customerVisitList.length>0">
        <div class="boxItem">
            <div class="boxBoy">
                <table class="table table-bordered text-center table-width">
                    <tbody>
                    <tr>
                        <td colspan="4" style="background: yellow;color: black">
                            <span style="margin-left: 16px;">跟踪历史</span>
                            <span class="iconfont icon-zhankai"
                                  v-if="btns==0 && customerVisitList.length>1"
                                  @click="btns=1"></span>
                            <span class="iconfont icon-shouqi"
                                  v-if="btns==1&& customerVisitList.length>1"
                                  @click="btns=0"></span>
                        </td>
                    </tr>
                    <template v-if="btns==0">
                        <template v-for="(item,i) in customerVisitList" v-if="i==0">
                            <tr>
                                <td class="tdColor"
                                    style="width: 25%;border-bottom: 4px solid #2c8cec">拜访时间
                                </td>
                                <td style="text-align: left;padding-left: 8px;">
                                    {{item.createTime}}
                                </td>
                                <td class="tdColor" style="width: 25%;">拜访方式</td>
                                <td style="width: 25%;text-align: left;">
                                    <span v-if="item.visitModel==='0'">电访</span>
                                    <span v-else-if="item.visitModel==='1'">面访</span>
                                    <span v-else></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="tdColor">拜访人员</td>
                                <td colspan="3" style="text-align: left;padding-left: 8px;">
                                    {{item.createUserName}}
                                </td>
                            </tr>
                            <tr>
                                <td class="tdColor">拜访内容</td>
                                <td colspan="3" class="lineTwo">
                                    <span style="height: 55px;">{{item.otherCondition}}</span>
                                </td>
                            </tr>
                        </template>
                    </template>
                    <template v-else>
                        <template v-for="(item,i) in customerVisitList">
                            <tr>
                                <td class="tdColor"
                                    style="width: 25%;border-bottom: 4px solid #2c8cec">拜访时间
                                </td>
                                <td style="text-align: left;padding-left: 8px;">
                                    {{item.createTime}}
                                </td>
                                <td class="tdColor" style="width: 25%;">拜访方式</td>
                                <td style="width: 25%;text-align: left;">
                                    <span v-if="item.visitModel==='0'">电访</span>
                                    <span v-else-if="item.visitModel==='1'">面访</span>
                                    <span v-else></span>
                                </td>
                            </tr>
                            <tr>
                                <td class="tdColor">拜访人员</td>
                                <td colspan="3" style="text-align: left;padding-left: 8px;">
                                    {{item.createUserName}}
                                </td>
                            </tr>
                            <tr>
                                <td class="tdColor">拜访内容</td>
                                <td colspan="3" class="lineTwo">
                                    <span style="height: 55px;">{{item.otherCondition}}</span>
                                </td>
                            </tr>
                        </template>
                    </template>
                    </tbody>
                </table>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <!--<div style="height: 48px;"></div>-->
    <button type="button" class="btn btn-blue" style="display: flex;justify-content: center;height: 30px"
            @click="save()" v-if="isRegion=='1'">保存
    </button>
</section>

<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=63aed32f"></script>

<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script>
    var api = frameElement.api, W = api.opener;
    $(function () {

        $("body").on("click", ".lineOne,.lineTwo", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>
<script>
    $(function () {
        $("body").on("click", ".lineOne,.lineTwo,.lineF", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
    $(function () {
        $("body").on("click", ".selectModel", function (e) {
            if ($(".model-picker-dropdown").is(":hidden")) {
                $(".model-picker-dropdown").css({
                    "width": $(this).outerWidth() + "px",
                    "left": $(this).offset().left,
                    "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            } else {
                $(".model-picker-dropdown").hide();
            }
        });
        $("body").on("click", ".model-select-tab a", function (e) {
            $(this).parent().find("a").removeClass("active");
            $(this).addClass("active");
            var boxName = $(this).attr("data-count");
            $(".model-select").hide();
            $(".model-select-content" + " ." + boxName).show();
        });
        $("body").on("click", ".model-select  a", function (e) {
            if ($(this).hasClass("active")) {
                return false;
            }
            $(this).parent().find("a").removeClass("active");
            var id = $(this).attr("attr-id");
            $(this).addClass("active");
            var val = $(this).text();
            if ($(this).parents(".model-select").hasClass("province")) {
                $(".model-select-tab a").removeClass("active");
                $(".model-select-tab a[data-count=city]").addClass("active");
                $(".model-select").hide();
                app.customerInfo.provinceName = val;
                app.customerInfo.cityName = '';
                app.customerInfo.countyName = '';
                app.getCity(id);
                $(".model-select-content .city").show();

            } else if ($(this).parents(".model-select").hasClass("city")) {
                $(".model-select-tab a").removeClass("active");
                var id = $(this).attr("attr-id");
                $(".model-select-tab a[data-count=county]").addClass("active");
                $(".model-select").hide();
                app.customerInfo.cityName = val;
                app.customerInfo.countyName = '';
                app.getCounty(id);
                $(".model-select-content .county").show();

            } else {
                app.customerInfo.countyName = val;
                $(".model-picker-dropdown").hide();
            }
        })
        $("body").on("click", ".model-picker-dropdown", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".model-picker-dropdown").hide();
        });
    });
</script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            provinceList:[],
            cityList:[],
            countyList:[],
            currentFlag: '0',
            userId: $.wyui.page.urlParams.userId,
            companyId: $.wyui.page.urlParams.companyId,
            list: [],
            customerId: $.wyui.page.urlParams.customerId,
            isAdd: $.wyui.page.urlParams.isAdd,
            pageType: 'edit',
            selectBran: "请选择品牌",
            selectMod: "请选择型号",
            itemsBran: [],
            itemsMod: [],
            customerInfo: {
                id: "",
                name: "",
                tel: "",
                birthday: "",
                buildCondition: "",
                buyDate: "",
                buyType: "",
                cityName: "",
                competitorCondition: "",
                countyName: "",
                customerCredit: "",
                customerType: "",
                deviceUse: "",
                existingDevice: "",
                intentionBrand: "",
                intentionModel: "",
                provinceName: "",
                revenueForecast: "",
                source: "销售录入",
                wechat: "",
                workingExperience: "",
                createUserId: '',
                throwFlag: ''
            },
            customerVisitList: [],
            customerVisitToday: {
                id: '',
                customerId: '',
                createTime: '',
                visitModel: '',
                createUserId: $.wyui.page.urlParams.userId,
                otherCondition: ''
            },
            btns: 0,
            isRegion: $.wyui.page.urlParams.isRegion

        },
        methods: {
            
            //去空格
            trims: function (data) {
                if (data) {
                    var data = data.replace(/[ ]/g, "");
                }
                return data;
            },
            getCustomerInfoById: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.intentionCustomerManagement.getCustomerInfoById, {
                    "customerId": that.customerId,
                    "userId": that.userId
                }, function (data) {
                    console.log(data.records)
                    var obj = {
                        dialog: 'hidden'
                    }

                    that.customerInfo = data.customerInfo;
                    if(that.customerInfo){
                        if(that.userId == that.customerInfo.createUserId){
                            that.pageType='edit'
                        }else{
                            that.pageType='look'
                        }
                    }

                    that.customerVisitList = data.customerVisitList;
                    if (data.customerVisitToday != 'null') {
                        that.customerVisitToday = data.customerVisitToday
                    }
                    /*if (that.customerInfo.intentionBrand != "") {
                     that.getModel();
                     }*/
                    // if (that.pageType == 'edit') {
                    //     that.customerVisitToday.otherCondition = ''
                    // }

                });
            },
            //日期格式限制
            isDate: function (val) {
                var pattern = /^((19[2-9]\d{1})|(20((0[0-9])|(1[0-8]))))\-((0?[1-9])|(1[0-2]))\-((0?[1-9])|([1-2][0-9])|30|31)$/;
                if (pattern.test(val)) {
                    var date = new Date(val);
                    var month = val.substring(val.indexOf("-") + 1, val.lastIndexOf("-"));
                    return date && (date.getMonth() + 1 == parseInt(month));
                }
                return false;
            },
            save: function () {
                var that = this;
                if (that.customerInfo.name == "") {
                    alert("请输入客户姓名");
                    return false;
                }

                if (that.customerInfo.tel == "") {
                    alert("请输入客户手机号码");
                    return false;
                }
                if (that.customerInfo.buyDate == "") {
                    alert("请输入客户购买时间");
                    return false;
                }

                /* if (that.customerInfo.tel.length != 11) {
                 alert("手机号格式不正确");
                 return false;
                 }*/
                /*   if (that.customerInfo.customerType == "") {
                 alert("客户类型不能为空");
                 return false;
                 }
                 if (that.customerInfo.wechat == "") {
                 alert("客户微信不能为空");
                 return false;
                 }

                 if (that.customerInfo.customerCredit == "") {
                 alert("客户信用不能为空");
                 return false;
                 }*/
                /*     if (that.customerInfo.birthday == "") {
                 alert("客户生日不能为空");
                 return false;
                 }else {
                 if (!that.isDate(that.customerInfo.birthday)) {
                 alert("生日格式不正确:YYYY-MM-DD");
                 return false;
                 }
                 }*/
                if (!that.isDate(that.customerInfo.birthday) && that.customerInfo.birthday != "") {
                    alert("生日格式不正确，例如1998-01-01");
                    return false;
                }

                // if (that.customerInfo.countyName == "") {
                //     alert("客户所在地不能为空，且必须精确到县！");
                //     return false;
                // }

                if (that.customerInfo.intentionModel == "") {
                    alert("请输入意向机型");
                    return false;
                }

                if (that.customerVisitToday.otherCondition == '' && that.isAdd != 1 && that.pageType == 'edit') {
                    alert("请输入最新拜访情况描述");
                    return false;
                }
                if(that.customerInfo.buyDate=='七天内'||that.customerInfo.buyDate=='一月内'){
                    if (that.customerInfo.existingDevice == '') {
                        alert("请输入现有设备");
                        return false;
                    }
                    if (that.customerInfo.workingExperience == '') {
                        alert("请输入从业经验");
                        return false;
                    }
                    if (that.customerInfo.buildCondition == '') {
                        alert("请输入工程情况");
                        return false;
                    }
                    if (that.customerInfo.revenueForecast == '') {
                        alert("请输入收入预测");
                        return false;
                    }
                    if (that.customerInfo.competitorCondition == '') {
                        alert("请输入竞争对手");
                        return false;
                    }
                }

                that.customerInfo.createUserId = that.userId;

                var obj = {
                    dialog: 'show'
                }

                $.wyui.postMethod(urlConfig.intentionCustomerManagement.saveIntentCustomerInfo, that.customerInfo, function (data) {
                    console.log(data.records)
                    var obj = {
                        dialog: 'hidden'
                    }

                    if (data.records == '保存成功' && that.isAdd != 1) {
                        that.customerVisitToday.customerId = that.customerInfo.id;
                        delete   that.customerVisitToday.createTime;
                        $.wyui.postMethod(urlConfig.intentionCustomerManagement.saveIntentCustomerVisit, that.customerVisitToday, function (data) {
                            console.log(data.records)
                            if (data.records == '保存成功') {
                                alert("保存成功");
                                var obj = {
                                    activity: 'closePage'
                                }
                                //返回列表页
                                parent.refresh();
                                api.close();
                            } else {
                                alert("保存失败");
                                return false;
                            }

                        });
                    } else if (data.records == '电话号码已存在') {
                        alert("电话号码已存在")
                        return false
                    } else {
                        alert("保存成功");
                        parent.refresh();
                        api.close();
                        var obj = {
                            activity: 'closePage'
                        }

                        return false;
                    }
                });
            },
            showDz: function () {
                var html = '';
                if (this.customerInfo.provinceName) {
                    html += this.customerInfo.provinceName;
                }
                if (this.customerInfo.cityName != '') {
                    html += "-" + this.customerInfo.cityName;
                }
                if (this.customerInfo.countyName != '') {
                    html += "-" + this.customerInfo.countyName;
                }
                return html;
            },
            getBran: function () {
                var that = this;
                $.wyui.postMethod('/deviceBrand/getBrandByCompanyId.json', {'companyId': '2018042608364206B46EC406F62EC079'}, function (r) {
                    that.itemsBran = r.brands;
                })

            },
            getModel: function () {
                var that = this;
                $.wyui.postMethod(urlConfig.intentionCustomerManagement.getModelByBrandName, {'brandName': that.customerInfo.intentionBrand}, function (r) {
                    that.itemsMod = r.modelInfo;
                })
            },
            selectAddress: function (id) {
                var obj = {
                    type: 'chooseAddress',
                    id: id,
                }

            },
            getCounty: function (id) {
                var that = this;
                $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': id}, function (r) {
                    console.log(r);
                    that.countyList = r.records;
                })

            },
            getCity: function (id) {
                var that = this;
                that.cityId = "市区";
                that.countyId = "县";
                that.countyList = "";
                var data = {};
                $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': id}, function (r) {
                    console.log(r);
                    that.cityList = r.records;
                })
            },

        },
        mounted: function () {
            var that = this;
            if ($.wyui.page.urlParams.isAdd != 1) {
                that.getCustomerInfoById();

            }
            /*获取省份*/
            $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': '0'}, function (r) {
                that.provinceList = r.records;
            })
        }
    })
</script>

</body>
</html>